<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/10/23
  Time: 10:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="commons/header.jsp" %>
<style type="text/css">
    div {
        margin-top: 0px;
        left: 10px;
    }

    #divEcharts {
        position: relative
    }

    #btn {
        position: absolute
    }

    #cartEcharts {
        position: relative
    }

    #btnCart {
        position: absolute
    }

    #echartsPie {
        position: relative
    }

    #btnPie {
        position: absolute
    }
    #echartsLine {
        position: relative
    }

    #btnLine {
        position: absolute
    }
</style>
<!-- 统计各类商品销售额的柱状图 -->
<div id="divEcharts" style="width: 500px;height: 250px;left: 250px;"></div>
<div id="btn" style="margin-top:0px;left: 450px;">
    <input id="btnRefresh" type="button" value="获取数据"/>
</div>

<!-- 购物车前十商品统计的柱状图 -->
<div id="cartEcharts" style="margin-top:150px;width: 500px;height: 250px;left: 250px;" ></div>
<div id="btnCart" style="margin-top:0px;left: 450px;">
    <input id="cartRefresh" type="button" value="获取数据"/>
</div>

<!-- 统计各类商品销售额的饼状图 -->
<div id="echartsPie" style="margin-top:150px;width: 500px; height: 250px; left: 250px;background-color: whitesmoke"></div>
<div id="btnPie" style="margin-top:0px;left: 450px;">
    <input id="pieRefresh" type="button" value="获取数据"/>
</div>

<!-- 日增用户曲线图 -->
<div id="echartsLine" style="margin-top:150px;width: 500px;height: 250px;left: 250px;background-color: whitesmoke"></div>

<div id="btnLine" style="margin-top:0px;left: 450px;">
    <input id="lineRefresh" type="button" value="获取数据"/>
    <select id="day" style="height: 26px;">
        <option value="7">近7天</option>
        <option value="30">近30天</option>
    </select>
</div>

<%@ include file="commons/footer.jsp" %>
<!-- 统计各类商品销售额的柱状图 -->
<script type="text/javascript">
    $(function () {
        var option = {
            color: ['#2f89cf'],  //图形中柱子的颜色
            title: {
                text: "各类商品销售额统计",
                left: 'center',  //标题水平居中
                bottom: '0px'  //bottom表示标题距离底部0px，否则默认标题是在图形上方的，可以配合grid属性一起调整位置
            },
            tooltip: {           //鼠标移动到图形内的提升值配置项
                trigger: 'axis',  //坐标轴指示器，坐标轴触发有效
                axisPointer: {type: 'line'}     //默认为直线，可选择：'line' | 'shadow'
            },
            /*如果不配置这些值，当x/y坐标的文字很长时，文字可能显示不完整*/
            grid: {left: '0%', top: '10px', right: '0%', bottom: '15%', containLabel: true},
            xAxis: [
                {
                    type: 'category',
                    data: ['一月', '二月', '三月', '四月', '五月', '六月'],
                    axisTick: {alignWithLabel: true},
                    /* 不添加本属性，默认是横向显示的，如果需要x轴文字侧着显示，才需要在这里设置旋转角度 */
                    // axisLabel: {rotate: 90}
                }
            ],
            yAxis: [{type: 'value'}],
            series: [//在同一个表中，可以设置多个不同颜色的柱子，方便比较{},{},{}, ......
                {
                    name: '销售额',
                    type: 'bar',
                    barWidth: '30%',
                    data: [10, 52, 200, 334, 390, 330],
                    itemStyle: {
                        //修改柱子圆角
                        barBorderRadius: 5
                    }
                },
                // {
                //     name:'前半年',
                //     type:'bar',
                //     barWidth:'30%',
                //     data:[10,52,200,334,390,330],
                //     itemStyle:{
                //         //修改柱子圆角
                //         barBorderRadius:5
                //     }
                // }
            ]
        };
        //这是jquery的写法。（JS的写法为: echarts.init(document.getElementById("divEcharts")); ）
        var eCharts = echarts.init($("#divEcharts")[0]);
        //调用echarts绘制图形
        eCharts.setOption(option);

        //点击事件：从后台获取数据绘制图形。bug：第一次点击拿到后台数据，但不刷新，后面继续点击就可以刷新柱状图
        //关于bug的猜想，可能是第一次ajax请求比较慢，但渲染功能却开始了，渲染了一个空数据，后面继续请求获取数据就快起来了（网络三次握手四次分手）
        $('#btnRefresh').click(function () {
            //这里通过ajax请求到后台获取数据
            var xData = [];
            var seriesData = [];
            $.ajax({
                url: '${pageContext.servletContext.contextPath}/show/barChart',
                type: 'get',
                dataType: 'json',
                // data: {},
                success: function (_data) {
                    // console.log(_data)
                    for (var i = 0; i < _data.length; i++) {
                        // seriesData[i] = _data[i].money;
                        // xData[i] = _data[i].name;
                        xData.push(_data[i].name);
                        seriesData.push(parseInt(_data[i].money))
                    }
                    //手动写的一个测试数据
                    // var xData = ["测试一", "测试二", "测试三", "测试四", "测试五"];
                    // var seriesData = [100, 200, 300, 400, 500];

                    //将获取到的后台数据赋值给option配置项的对应属性
                    option.xAxis[0].data = xData;
                    option.series[0].data = seriesData;
                }
            })
            //重新渲染图形
            var eCharts = echarts.init($("#divEcharts")[0]);
            eCharts.setOption(option);
        });
    });
</script>

<!-- 购物车前十商品统计的柱状图 -->
<script type="text/javascript">
    $(function () {
        var option = {
            color: ['#2f89cf'],  //图形中柱子的颜色
            title: {
                text: "用户购物车前10商品统计",
                left: 'center',  //标题水平居中
                bottom: '0px'  //bottom表示标题距离底部0px，否则默认标题是在图形上方的，可以配合grid属性一起调整位置
            },
            tooltip: {           //鼠标移动到图形内的提升值配置项
                trigger: 'axis',  //坐标轴指示器，坐标轴触发有效
                axisPointer: {type: 'line'}     //默认为直线，可选择：'line' | 'shadow'
            },
            /*如果不配置这些值，当x/y坐标的文字很长时，文字可能显示不完整*/
            grid: {left: '0%', top: '10px', right: '0%', bottom: '15%', containLabel: true},
            xAxis: [
                {
                    type: 'category',
                    data: ['一月', '二月', '三月', '四月', '五月', '六月'],
                    axisTick: {alignWithLabel: true},
                    /* 不添加本属性，默认是横向显示的，如果需要x轴文字侧着显示，才需要在这里设置旋转角度 */
                    axisLabel: {rotate: 90}
                }
            ],
            yAxis: [{type: 'value'}],
            series: [//在同一个表中，可以设置多个不同颜色的柱子，方便比较{},{},{}, ......
                {
                    name: '销量',
                    type: 'bar',
                    barWidth: '30%',
                    data: [10, 52, 200, 334, 390, 330],
                    itemStyle: {
                        //修改柱子圆角
                        barBorderRadius: 5
                    }
                }
            ]
        };
        var eCharts = echarts.init($("#cartEcharts")[0]);
        //调用echarts绘制图形
        eCharts.setOption(option);

        //点击事件：从后台获取数据绘制图形。bug：第一次点击拿到后台数据，但不刷新，后面继续点击就可以刷新柱状图
        //关于bug的猜想，可能是第一次ajax请求比较慢，但渲染功能却开始了，渲染了一个空数据，后面继续请求获取数据就快起来了（网络三次握手四次分手）
        $('#cartRefresh').click(function () {
            //这里通过ajax请求到后台获取数据
            var xData = [];
            var seriesData = [];
            $.ajax({
                url: '${pageContext.servletContext.contextPath}/show/tenGoodsBarChart',
                type: 'get',
                dataType: 'json',
                // data: {},
                success: function (_data) {
                    // console.log(_data)
                    for (var i = 0; i < _data.length; i++) {
                        // seriesData[i] = _data[i].num;
                        // xData[i] = _data[i].name;
                        xData.push(_data[i].name);
                        seriesData.push(parseInt(_data[i].num))
                    }
                    //将获取到的后台数据赋值给option配置项的对应属性
                    option.xAxis[0].data = xData;
                    option.series[0].data = seriesData;
                }
            })
            //重新渲染图形
            var eCharts = echarts.init($("#cartEcharts")[0]);
            eCharts.setOption(option);
        });
    });
</script>

<!-- 统计各类商品销售额的饼状图 -->
<script type="text/javascript">
    $(function () {
        var option = {
            title: {
                text: '各类商品销售数据占比',
                // subtext: '饼图',
                x: 'center',
                y: 'bottom'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{b} <br/>{c} : {d} %"      //a 系列名称，b 数据项名称，c 数值，d 百分比
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['手机','电脑']
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            series: [
                {
                    name: '点击量',
                    type: 'pie',
                    radius: '55%',//饼图的半径大小
                    center: ['50%', '60%'],//饼图的位置
                    data: [{name:'手机',value:100},{name:'电脑',value:200}]
                }
            ]
        }
        var eCharts = echarts.init($("#echartsPie")[0]);
        //调用echarts绘制图形
        eCharts.setOption(option);

        //点击事件：从后台获取数据绘制图形。bug：第一次点击拿到后台数据，但不刷新，后面继续点击就可以刷新柱状图
        //关于bug的猜想，可能是第一次ajax请求比较慢，但渲染功能却开始了，渲染了一个空数据，后面继续请求获取数据就快起来了（网络三次握手四次分手）
        $('#pieRefresh').click(function () {
            var xData = [];
            var seriesData = [];
            //这里通过ajax请求到后台获取数据
            $.ajax({
                url: '${pageContext.servletContext.contextPath}/show/barChart',
                type: 'get',
                dataType: 'json',
                // data: {},
                success: function (_data) {
                    // console.log(_data)
                    for (var i = 0; i < _data.length; i++) {
                        // seriesData[i] = _data[i].money;
                        // xData[i] = _data[i].name;
                        xData.push(_data[i].name);
                        seriesData.push({
                            name: _data[i].name,
                            value: parseInt(_data[i].money)
                        })
                    }
                    //手动写的一个测试数据
                    // var xData = ["测试一", "测试二", "测试三", "测试四", "测试五"];
                    // var seriesData = [100, 200, 300, 400, 500];

                    //将获取到的后台数据赋值给option配置项的对应属性
                    option.legend.data = xData;
                    option.series[0].data = seriesData;
                }
            })
            //重新渲染图形
            var eCharts = echarts.init($("#echartsPie")[0]);
            eCharts.setOption(option);
        });
    })
</script>

<!-- 统计每日新增用户的折线图 -->
<script>
    $(function () {
        // var option = echarts.init(document.getElementById("echartsLine"));
        var option = {
            title: {
                text: '日增用户曲线',
                x:'cente'
            },
            tooltip: {},
            legend: {
                data: ['访客来源']
            },
            xAxis: {
                data: ["智联招聘", "51job", "拉钩", "Boss直聘"]
            },
            yAxis: {},
            series: [{
                name: '注册量',
                type: 'line',
                data: [600, 310, 200, 800]
            }]
        };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('echartsLine'));
        //使用制定的配置项和数据显示图表
        myChart.setOption(option);

        //选择事件：从后台获取数据绘制图形
        $('#lineRefresh').click(function () {
            //这里通过ajax请求到后台获取数据
            var day = $("#day").val();
            var xData = [];
            var seriesData = [];
            $.ajax({
                url: '${pageContext.servletContext.contextPath}/show/newUserNum/'+parseInt(day),
                type: 'get',
                dataType: 'json',
                // data: {day: day},
                success: function (_data) {
                    console.log(_data)
                    for (var i = 0; i < _data.length; i++) {
                        // seriesData[i] = _data[i].num;
                        // xData[i] = _data[i].name;
                        xData.push(_data[i].time);
                        seriesData.push(parseInt(_data[i].num))
                        // console.log(xData)
                        // console.log(seriesData)
                    }
                    //将获取到的后台数据赋值给option配置项的对应属性
                    option.xAxis.data = xData;
                    option.series[0].data = seriesData;
                }
            })
            //重新渲染图形
            var eCharts = echarts.init($("#echartsLine")[0]);
            eCharts.setOption(option);
        });
    });
</script>
